<template>
  <div>
    <div class="search">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        background="#ff6040"
      />
      <ul>
        <li>综合排序</li>
        <li>销量</li>
        <li>价格</li>
        <li>好评度</li>
        <li>店铺</li>
        <li><van-icon name="bars" />筛选</li>
      </ul>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="goods" v-show="!flag">
        <van-card
          v-for="item in goodslist"
          :key="item.id"
          :price="item.price"
          :title="item.goodsname"
          :thumb="$Url + item.img"
        />
      </div>
    </van-pull-refresh>

    <div v-show="flag">
      <van-empty description="该分类当前没有数据" />
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      value: "",
      goodslist: [], // 商品数据
      flag: false, // 是否显示暂无数据
      isLoading: false,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.goodlist();
  },
  watch: {},
  methods: {
    goodlist() {
      this.$api
        .getgoodlist({
          cateid: this.$route.query.id * 1,
          type: this.$route.query.type * 1,
          page: 1,
          size: 10,
        })
        .then((res) => {
          this.goodslist = res.data.list.goodData;
          if (this.goodslist == null) {
            this.flag = true;
          } else {
            this.flag = false;
          }
        });
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.goodlist()
      }, 1000);
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.search {
  background: linear-gradient(#ff6040, #ff887d);
  ul {
    display: flex;
    font-size: 28px;
    // justify-content: space-between;
    li {
      padding: 5px;
      padding-bottom: 20px;
      flex: 1;
      text-align: center;
      color: #fff;
    }
  }
}
.goods {
  margin-top: 10px;
}
</style>
